<template>
  <div class="soundsPanal">
    <header>
      <div class="title">
        <i></i>
        人气M音
      </div>
      <div class="nav">
        <a href="#">排行榜</a>
      </div>
    </header>
    <main>
      <a v-for="{front_cover,soundstr,view_count_formatted,comment_count} in sound" :key="soundstr">
        <img :src="front_cover" alt="">
        <div class="title">{{soundstr}}</div>
        <div class="detail">
          <span class="item playTimes">{{view_count_formatted}}</span>
          <span class="item comments">{{comment_count}}</span>
        </div>
      </a>
    </main>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {getHotSound} from '../api/index';
export default {
  data:function(){
    return {
      sound:[]
    }
  },
  computed:{
    // ...mapState(["banner","channel","sound"])
  },
  async mounted(){
    // this.$store.dispatch("getSoundList");
    const {info} = await getHotSound();
    const {sound} = info;
    this.sound = sound.slice(0,3);
    // console.log(this.sound)
  },
}
</script>

<style lang="scss">
  .soundsPanal{
    width:100%;
    height:2.29rem;
    margin:0.1rem 0;
    padding-bottom:0.16rem;
    header{
      width:100%;
      height:0.4rem;
      padding:0 0.14rem;
      display: flex;
      justify-content: space-between;
      .title{
        width:1rem;
        height:0.41rem;
        text-align: center;
        font-size: 16px;
        color: #000;
        i{
          display: inline-block;
          position: relative;
          top: 7px;
          width: 26px;
          height: 26px;
          background-size: 166px 166px;
          background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons-catalog@2x.f22564ff.png");
          background-position: 0 0;
        }
      }
      .nav{
        width:0.57rem;
        height:0.4rem;
        a{
          display: inline-block;
          max-width: 0.66rem;
          text-align: center;
          font-size: 0.13rem;
          color: #9e9e9e;
          line-height: 0.4rem;
        }
        ::after{
          background-size: 2.62rem 2.34rem;
          background-position: -2.23rem -1.32rem;
          width: 0.18rem;
          height: 0.18rem;
          background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png");
          content: "";
          display: inline-block;
          position: relative;
          top: 0.04rem;
          right: -0.03rem;
        }
      }
    }
    main{
      width:3.47rem;
      height:1.73rem;
      margin:0 0.14rem;
      display: flex;
      justify-content: space-around;
      background-color: transparent;
      a{
        width:1.06rem;
        height:1.63rem;
        display: inline-block;
        margin: 0.05rem 0;
        img{
          width:1.06rem;
          height:1.06rem;
        }
        .title{
          width:1.06rem;
          height:0.36rem;
          margin:0.04rem 0;
          color: #616161;
          font-size: 13px;
          line-height: 18px;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .detail{
          width:1.06rem;
          height:0.11rem;
          display:flex;
          justify-content: space-between;
          .item{
            position: relative;
            padding-left: 0.14rem;
            font-size: 0.11rem;
            line-height: 0.11rem;
            color: #bdbdbd;
          }
          .playTimes{
            padding-left:0.14rem;
            height:0.11rem;
          }
          ::before{
            content:"";
            display: block;
            position: absolute;
            left:0;
            height:0.1rem;
            width:0.12rem;
            background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png");
            background-size: 0.56rem 0.55rem;
            background-position: -0.44rem -0.27rem;
          }
          .comments{
            height:0.11rem;
            padding-left:0.14rem;
          }
          ::before{
            background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png");
            background-size: 0.56rem 0.55rem;
            background-position:-0.15rem -0.44rem;
            content: "";
            display: block;
            position: absolute;
            left: 0;
            height: 0.1rem;
            width: 0.12rem;
          }
        }
      }
    }
  }
</style>